{% extends 'base/base.html'%}

{% block title %}
<title>添加笔记</title>
{% endblock title %}
<!-- 面包屑 -->
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'index'%}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'note_add'%}">添加笔记</a></li>
{% endblock breadcrumb %}
{% block content %}
<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-header">
          添加笔记
      </div>
      <div class="card-body">
        {%csrf_token%}
        <div class="form-group">
          <label for="exampleFormControlInput1">笔记标题</label>
          <input type="text" maxlength="100" class="form-control" name="title" id="note_title_id">
        </div>
        <div class="form-group">
          <label for="exampleFormControlTextarea1">内容</label>
          <script type="text/plain" id="note_content_id" style="margin-bottom:100px;"></script> 
        </div>
        <button type="button" class="btn btn-primary btn-block" onclick="submit()">添加</button>
      </div>
    </div>
  </div>
  <div class="col-sm-3"></div>
</div>


<script type="text/javascript">
  
  var ue = UE.getEditor('note_content_id', {
      theme:"default", //皮肤
  });
  SyntaxHighlighter.all()

  /*S QQ登录*/
  function toLogin()
  {
    //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
    //否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
    var A=window.open("oauth/index.php","TencentLogin",
          "width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
  }
  /*E QQ登录*/

  /*S 提交信息*/
  function submit(){
    var title = $("#note_title_id").val();
    var content = ue.getContent();
    var csrfToken = $("[name='csrfmiddlewaretoken']").val();
    if(!title || !content){
      $('#model_tip').modal('show');
      $('#model_title').text('错误提示');
      $('#model_content').text('内容和标题不能为空');
    }
    else{
      data = JSON.stringify({
        'title':title,
        'content':content
      });
      $.ajax({
          type:"POST",
          url:'/notes/add/', 
          contentType:"application/json",
          dataType:"json",
          data:data,
          headers:{
            'X-CSRFToken':csrfToken
          },
          success:function(data){
            console.log(data)
            if(data['result']==1){
              $('#model_tip').modal('show');
              $('#model_title').text('成功提示');
              $('#model_content').text("添加笔记【"+data['data']['note']+"】成功");
            }else{
              $('#model_tip').modal('show');
              $('#model_title').text('错误提示');
              $('#model_content').text(data['msg']);
            }
          },
          error:function(XMLHttpRequest, textStatus, errorThrown){
            $('#model_tip').modal('show');
            $('#model_title').text('错误提示');
            $('#model_content').text(errorThrown);
          }
        })
      }
  }
  /*E 提交信息*/
</script>
{% endblock content %}
